<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2022-11-24 16:31:31
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-08-18 10:48:32
-->
<template>
    <view class='recycle-method'>
        <view class='header'>
            <view class="header-bg"></view>
            <view class="list d-flex">
                <view class="item d-flex flex-fill align-items-center justify-content-center flex-column"
                    v-for="(item, index) in wayList" :key="index" @click="handleWay(index)">
                    <text class="text" :style="{color:wayIndex==index?'#333333':'#99A5A5'}">{{ item.wayName }}</text>
					<text class="label" v-if="index==0">加价回收</text>
                </view>
            </view>
            <view :class='"all-2 move position-2-" + wayIndex'></view>
        </view>
        <view class="no-visit" v-if="noVisit&&wayIndex==1">该地区暂不支持上门回收,请选择邮寄回收</view>
        <view>
            <view class='contact'>
                <!-- #ifdef H5 -->
                <view>
                    <view class="item d-flex align-items-center justify-content-between" @click="handleGeginClick">
                        <view class="d-flex align-items-center flex-fill">
                            <view class="input" v-if="addressInfo.district">
                                {{ addressInfo.province }} {{ addressInfo.city }} {{ addressInfo.district }}
                            </view>
                            <view class="phcolor" v-else>请选择省市区</view>
                        </view>
                        <image src="https://image.chushouya.com/assets/images/product/icon_click@2x.png" mode="aspectFill" class="right-icon"></image>
                    </view>
                    <view class="item-picker">
                        <uni-data-picker ref="gegionPicker" class="picker" placeholder="请选择省市区" popup-title="请选择省市区"
                            :localdata="gegionTree" v-model="addressInfo.districtCode" :map="treeMap" :border="false"
                            @change="gegionPickerOnchange" />
                    </view>
                    <view class="item d-flex align-items-center">
                        <input placeholder-class="phcolor" class="input flex-fill"
                            :placeholder="'请输入' + serviceTypeText + '地址'" v-model="addressInfo.address" />
                    </view>
                </view>
                <!-- #endif -->
                <!-- #ifndef H5 -->
                <view @click="$emit('handleShipping')" class="choose-address">
                    <!-- <view class="item d-flex align-items-center">
                        <view class="base-icons xingming-icon"></view>
                        <text class="input" v-if="addressInfo.userName">{{ addressInfo.userName }}</text>
                        <text class="phcolor"  v-else>点击选择收货地址</text>
                    </view> -->
                    <view class="item d-flex align-items-center justify-content-between">
                        <text class="phcolor">取件地址</text>
						<view class="d-flex align-items-center flex-fill justify-content-end address-text">
							<text class="text">{{ addressInfo.address }}</text>
							<image src="https://image.chushouya.com/assets/images/product/icon_click@2x.png" mode="aspectFill" class="right-icon"></image>
						</view>
                    </view>
                </view>
                <!-- #endif -->



                <view class="item d-flex justify-content-between align-items-center border-none" @click="handleTime">
                    <view class="phcolor">预约时间</view>
                    <view class="d-flex align-items-center flex-fill justify-content-end">
                        <text class="text">{{ appointTime }}</text>
						<image src="https://image.chushouya.com/assets/images/product/icon_click@2x.png" mode="aspectFill" class="right-icon"></image>
                    </view>
                </view>
                <view class="item d-flex justify-content-between align-items-center border-none">
                    <view class="phcolor">联系电话</view>
                    <view class="d-flex align-items-center flex-fill justify-content-end">
                        <input class="input" placeholder="请输入联系电话" maxlength="11"
                    v-model="addressInfo.userPhone" />
                    </view>
                </view>
                <view class="item d-flex justify-content-between align-items-center border-none">
                    <view class="phcolor">联系人</view>
                    <view class="d-flex align-items-center flex-fill justify-content-end">
                        <input class="input" placeholder="请输入联系人" maxlength="11"
                    v-model="addressInfo.userName" />
                    </view>
                </view>
                
            </view>
            <view class="payment-info" v-if="false">
                <view class="title">收款信息<text>填写准确有助于快速到账哦</text></view>
                <view class="info-tips">
                    <text class="label">收款人姓名</text>
                    <text class="value" v-if="!inputName && !accountInfo.accountName" @click="inputName=true">请输入本人姓名</text>
                    <input type="text" v-else focus v-model="accountInfo.accountName" @blur="inputName=false">
                </view>
                <view class="info-tips">
                    <text class="label">收款账户</text>
                    <text class="value" v-if="!inputBank  && !accountInfo.accountNumber" @click="inputBank=true">银行卡号</text>
                    <input type="text" v-else focus v-model="accountInfo.accountNumber" @blur="inputName=false">
                </view>
            </view>
        </view>
        
        <!-- 选择上门或者取件时间 -->
        <select-time-layer ref="selectTimeRef" :time="time" :serviceTypeText="serviceTypeText" :multiArray="timeMultiArray"
            @handleDaysClick="handleDaysClick" @handleHoursClick="handleHoursClick" />
            
    </view>
</template>
<script>
import {
    parseTime, generateVisitTime
} from '@/utils'
import StringUtil from '@/utils/stringUtil'
import regionTree from '@/utils/city.json'
import SelectTimeLayer from './SelectTimeLayer.vue'

export default {
    components: {
        SelectTimeLayer
    },
    options: {
        styleIsolation: 'shared'
    },
    props: {
        wayList: {
            type: Array,
            default: () => []
        },
        wayIndex: {
            type: Number,
            default: 0
        },
        addressInfo: {
            type: Object,
            default: () => { }
        },
        accountInfo: {
            type: Object,
            default: () => { }
        },
        serviceTypeText: {
            type: String,
            default: ""
        },
        noVisit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            way: [
                { id: 2, name: "顺丰回收", image: "/static/images/home/img_step_1.png", "desc": "顺丰包邮" },
                { id: 1, name: "上门回收", image: "/static/images/home/img_step_2.png", "desc": "当面结款" },
                
            ],
            wayImage: "/static/images/home/img_step_1.png",
            treeMap: { text: "label", value: "value" },
            userName: "",
            address: "",
            gegionTree: [],
            timeMultiArray: [
                ["0", "1", "2", "3", "4", "5"],
                ["08", "10", "12", "14", "16", '18']
            ],
            time: [],
            isVisit: false, // 是否上门回收
            form: {
                userName: "",
                address: "",
                province: "",
                city: "",
                district: "",
                districtCode: 0,
            },
            inputName:false,
            inputBank:false
        }
    },
    computed: {
        appointTime: function () {
            return StringUtil.format("{} {}:00 - {}:00", parseTime(this.time[0], "{m}月{d}日 (周{a}) "), parseInt(this.time[1]), parseInt(this.time[1]) + 2);
        }
    },
    //点击交易方式
    methods: {
        //初始化数据
        init() {
            this.gegionTree = regionTree
            this.generateTime()
        },
        //创建时间
        generateTime() {
            this.timeMultiArray = generateVisitTime()
            this.time = [this.timeMultiArray[0].day, this.timeMultiArray[0].hour[0]]
            this.$emit('handleTime', this.time)
        },
        //切换回收方式
        async handleWay(index) {
            this.$emit('handleWay', index)
			this.$store.dispatch('evaluate/updateMode', index)
            this.wayImage = this.way[index].image
        },
        //省市区改变
        gegionPickerOnchange(e) {
            const { value } = e.detail
            const province = value[0].text
            const city = value[1].text
            const district = value[2].text
            const districtCode = value[2].value
            const address = ''
            this.address = address
            this.form = {
                ...this.form,
                province,
                city,
                district,
                districtCode,
                address
            }
        },
        //点击省市区
        handleGeginClick() {
            this.$refs.gegionPicker.show()
        },
        //点击时间f
        handleTime() {
            this.handleLayerShow('selectTimeRef')
        },

        //点击日期
        handleDaysClick(day) {
            const _time = [day, this.timeMultiArray.find(item => item.day === day).hour[0]];
            this.time = [..._time]
        },
        //点击时间
        handleHoursClick(hour) {
            const _time = [this.time[0], hour];
            this.time = [..._time]
            this.handleLayerHide('selectTimeRef')
            this.$emit('handleTime', this.time)
        },
        // 弹窗显示
        handleLayerShow(ref) {
            this.$refs[ref].onOpen()
        },
        // 弹窗隐藏
        handleLayerHide(ref) {
            this.$refs[ref].onClose()
        },
    },
    mounted() {
        this.init()
    },
    watch: {
        form: {
            handler: function (val, oldVal) {
                this.$emit('handleAddressInfo', val)
            },
            deep: true
        },
        addressInfo: {
            handler: function (val, oldVal) {
                this.$emit('handleAddressInfo', val)
            },
            deep: true
        }
    }
}

</script>
<style lang="scss">
.recycle-method {
    border-radius: 20rpx;
    position: relative;

    .header {
        position: relative;
        z-index: 0;
        overflow: hidden;
        height: 115rpx;
        border-radius: 20rpx 20rpx 0 0;

        .header-bg {
            background: #F6F7F9;
            border: solid #fff;
            position: absolute;
            left: 0;
            top: 10rpx;
            width: 100%;
            height: 105rpx;
            border-radius: 20rpx 20rpx 0 0;
            border-width: 5rpx 5rpx 0 5rpx;
        }

        .active {
            color: #fff;
        }

        .move {
            z-index: 666;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            top: 14rpx;
            display: flex;
            transition: left .5s;
            background: #fff;
            pointer-events: none;
            height: 104rpx;

            &:after {
                content: "";
                display: inline-block;
                position: absolute;
                bottom: 8rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 80rpx;
                height: 8rpx;
                background: linear-gradient(270deg, #FFFFFF 0%, #FFD500 100%);
                border-radius: 4rpx;
            }
        }

        .move.all-2 {
            background: url(@/static/images/assess/img_selected.png) no-repeat top/cover;
            width: 470rpx;
        }

        .move.position-2-0 {
            left: -60rpx;
        }

        .move.position-2-1 {
            left: calc(100% - 410rpx);
        }

        .list {
            z-index: 999;
            overflow-y: visible;
            overflow-x: hidden;
            color: #fff;
            height: 120rpx;
            padding: 0 12rpx 0rpx;
			.label {
				width: 88rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				background: linear-gradient( 90deg, #FF8647 0%, #FF3755 100%);
				border-radius: 15rpx 15rpx 15rpx 0rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 18rpx;
				color: #FFFFFF;
				position: absolute;
				top: 20rpx;
				right: 16rpx;
			}
        }

        .list,
        .item {
            position: relative;
            box-sizing: border-box;
            background: transparent;
        }

        .item {
            height: 100rpx;
            padding-top: 5rpx;
			
            .tip {
                width: 164rpx;
                height: 36rpx;
                font-size: var(--hui-font-size-22);
                color: var(--hui-color-primary);
                background: url(@/static/images/assess/img_tip.png) no-repeat top/cover;
                text-align: center;
            }

            .block {
                width: 164rpx;
                height: 36rpx;
            }

            .text {
                position: relative;
                color: var(--hui-color-section);
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                display: inline-block;
                max-width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
            }
        }
    }

    .way-image {
        margin: 0rpx 0 0 0;
        padding: 30rpx 0 0 0;
        background: #fff;
    }
    .no-visit{
        padding: 20rpx 0 0 24rpx;
        background: #fff;
        color: #f55;
        font-size: var(--hui-font-size-24);    }

    .contact {
        padding: 0rpx 25rpx 0rpx;
        margin: 0rpx auto;
        border-radius: 0 0 16rpx 16rpx;
        background-color: #fff;
        min-height: 200rpx;
        .choose-address {
            width: 100%;
            .item {
                width: 100%;
                justify-content: space-between;
            }
        }
        .item {
            height: 104rpx;
            border-bottom: solid #EEEEEE 1rpx;

            .base-icons {
                margin-right: 16rpx;
            }

            .input {
                font-size: var(--hui-font-size-28);
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 40px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
				text-align: right;
            }

            .phcolor {
                color: var(--hui-color-title);
                font-size: var(--hui-font-size-28);
                white-space: nowrap;
                min-width: 120rpx;
            }

            .text {
                font-size: var(--hui-font-size-28);
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: var(--hui-color-title);
                line-height: 40px;
                display: inline-block;
				max-width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
            }
            .address-text {
                max-width: calc(100% - 120rpx);
            }
        }
        .border-none {
            border: none;
        }
    }

    .phone {
        padding: 0rpx 36rpx 0rpx 32rpx;
        border-radius: 16rpx;
        background-color: #fff;
        height: 104rpx;
        margin: 24rpx 0 0 0;

        .phcolor {
            font-size: var(--hui-font-size-28);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: var(--hui-color-subtitle);
        }

        .label {
            font-size: var(--hui-font-size-28);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: var(--hui-color-title);
            line-height: 40px;
            margin: 0 0 0 18rpx;
        }

        .input {
            text-align: right;
            font-size: var(--hui-font-size-28);
        }
    }



    .uni-data-tree-input {
        display: none;
    }

    .uni-data-tree-dialog {

        .selected-item-active,
        .check {
            border-color: var(--hui-color-primary);
        }
    }
    
    

}
.payment-info {
    width: 100%;
    border-radius: 24rpx;
    background: #FFFFFF;
    margin-top: 20rpx;
    padding: 32rpx 32rpx 0;
    .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #FF6500;
            margin-left: 24rpx;
        }
    }
    .info-tips {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:first-child {
            border-bottom: solid #EEEEEE 1rpx;
        }
        .label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
        }
        .value {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #A7ABB2;
        }
        input {
            text-align: right;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
        }
    }
}

::v-deep {
    .uni-data-tree-input {
        display: none;
    }

    .uni-data-tree-dialog {

        .selected-item-active,
        .check {
            border-color: var(--hui-color-primary);
        }
    }
    .uni-input-placeholder {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx!important;
        color: #A7ABB2!important;
        text-align: right;
    }
    .uni-input-input {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        text-align: right;
    }
}
.right-icon {
	width: 32rpx;
	height: 32rpx;
}
</style>